{{define "index/index.html"}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - 首页</title>
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css">

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<style>
    .col-head {
        background: #e7e7e7;
        padding: 0 10px;
        width: 60px;
        text-align: center;
        margin-right: 10px;
    }

    .col-value {


        width: 60px;

    }

    .Processlist {
        position: absolute;
        background: antiquewhite;
        width: 100%;
        z-index: 100;
        display: none;
    }

    .Processlist div {
        padding-left: 10px;
        height: 25px;
        line-height: 25px;
        border-bottom: dashed;
    }

    .ProcessSelect:hover .Processlist {
        display: block;
    }

    .Processlist div:hover {
        background: snow;
    }
</style>

<body>

<div style="margin: 0 auto; max-width: 1140px;">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend></legend>
    </fieldset>

    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-md4">
            计划单号：
            <div class="layui-inline ProcessSelect">
                <!--                <span onclick="getList()" >JHD0000002</span>-->
                <input type="text" class="layui-input" id="ProcessFCode" value="JHD0000002" onclick="getList()"
                       readonly>
                <div class="Processlist">
                </div>
            </div>


        </div>

        <div class="layui-col-xs6 layui-col-md4">
            <div class="layui-btn layui-btn-disabled" id="proce_image">烟标模板图片</div>
        </div>
        <div class="layui-col-xs6 layui-col-md4">
            <div class="layui-btn layui-btn-normal close" id="operate" onclick="submit()">报工</div>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title">
        <legend></legend>
    </fieldset>

    <div class="layui-row">
        <div class=" layui-col-xs6 layui-col-md2" style="height: 38px;line-height: 38px;">订单号：<span id="BatchNumber">Y002</span>
        </div>
        <div class=" layui-col-xs6 layui-col-md2" style="height: 38px;line-height: 38px;">当前工序：<span
                id="ProcessId">Y002</span></div>
        <div class="layui-col-xs6 layui-col-md8 " style="height: 38px;line-height: 38px;">存货名称：<span id="ProductName">三沙（细支）条盒面板</span>
        </div>
        <div class=" layui-col-xs6 layui-col-md3" style="height: 38px;line-height: 38px;">派工数量：<span
                id="DispatchQuantity">36000</span></div>
        <div class=" layui-col-xs6 layui-col-md3" style="height: 38px;line-height: 38px;">设备ID：<span
                id="EmId">QZJ1</span></div>
    </div>
    <div class="layui-row" style="display: flex;height: 38px;line-height: 38px;    font-weight: 700;">
        <div class="">头总生产数：<span id="HeadTotal">0</span></div>
        <div class="" style="margin-left:10px;">尾总生产数：<span id="tailTotal">0</span></div>

    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend></legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-md8">
            <div style=" width: 90%; ">
                <div class="layui-row" style="    border: 1px solid #e7e7e7;">
                    <div class="col-1 list" style="height: 38px;display: flex;line-height: 38px;">
                        <div class="col-head">
                            托盘号
                        </div>
                        <div class="col-value">2</div>
                        <div class="col-value">2</div>
                        <div class="col-value">2</div>
                        <div class="col-value">2</div>
                        <div class="col-value">2</div>
                    </div>
                    <div class="col-1" style="height: 38px;display: flex;line-height: 38px;">
                        <div class="col-head">
                            产品数量
                        </div>
                        <div class="col-value">2</div>
                        <div class="col-value">2</div>
                        <div class="col-value">2</div>
                        <div class="col-value">2</div>
                        <div class="col-value">2</div>
                    </div>
                </div>
                <div class="layui-form">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>机头数</th>
                            <th>机尾数</th>
                            <th>废品数</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>372</td>
                            <td>356</td>
                            <td>356</td>

                        </tr>

                        </tbody>
                    </table>
                </div>
                <div class="layui-form">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>历史托盘号</th>
                            <th>产品数量</th>
                            <th>机头数</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>T002</td>
                            <td>372</td>
                            <td>356</td>

                        </tr>
                        <tr>
                            <td>T002</td>
                            <td>372</td>
                            <td>356</td>

                        </tr>

                        </tbody>
                    </table>
                </div>


            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md4">
            <div class="layui-form">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>托盘号</th>
                        <th>数量</th>


                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>372</td>
                        <td>356</td>


                    </tr>
                    <tr>
                        <td>372</td>
                        <td>356</td>


                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>


</div>


<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="/assets/libs/layui/layui.js"></script>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/js/VILEngine.js"></script>
<script>
    var ws = new WebSocket("ws://127.0.0.1:9090/ws");
    var isConnect = true;
    ws.onopen = function (evt) {
        console.log("Connection open ...");

        var se = setInterval(function () {
            if (isConnect === false) {
                clearInterval(se);
            }
            packJson = {"access_token":"Liza2",
                "expire_in":1233,
                "openid":"2222223",
                "unionid":'22222222222224',
                "refresh_token":'22222222222225',
                "scope":'22222222222225',
            };
            ws.send( JSON.stringify(packJson));
        }, 3000)
    };

    ws.onmessage = function (evt) {
        var msg=JSON.parse(evt.data);
        $("#HeadTotal").html(msg.HeadTotal);
        $("#tailTotal").html(msg.TailTotal);
        console.log(msg);
        console.log( msg.TailTotal);
    };

    ws.onclose = function (evt) {
        isConnect = false;
        console.log("Connection closed.");
    };
    // let counter  = 0;
    // let isConnect = false;
    // let handler = {
    //     onConnect:function (e) {
    //         isConnect = true;
    //         console.log("handler connect success ", e);
    //         var se = setInterval(function () {
    //             if(isConnect === false){
    //                 clearInterval(se);
    //             }
    //                 var packJson = {"access_token":"Liza",
    //                     "expire_in":123,
    //                     "openid":"222222",
    //                     "unionid":'2222222222222',
    //                     "refresh_token":'2222222222222',
    //                     "scope":'2222222222222',
    //                 };
    //
    //             var mycars = new Array();
    //             mycars["access_token"] = "Saab";
    //             mycars["expire_in"] = 122;
    //             mycars["openid"] = "BMW";
    //             mycars["unionid"] = "BMW";
    //             mycars["refresh_token"] = "BMW";
    //             mycars["scope"] = "BMW";
    //
    //
    //             socket.send(mycars);
    //         }, 3000)
    //     },
    //     onDisconnect:function (e) {
    //         isConnect = false;
    //         console.log("handler disconnect ", e);
    //     },
    //     onMsg:function (data) {
    //         counter++;
    //         if(counter >= 2000){
    //             counter = 0;
    //             console.log("handler receive message ", data)
    //         }
    //     }
    // };
    // let socket = new VIL.EngineSocket("ws://127.0.0.1:10215/ws", handler);


    var ProcesslistData;
    layui.use(function () {
        var layer = layui.layer
            , form = layui.form
            , laypage = layui.laypage
            , element = layui.element
            , laydate = layui.laydate
            , util = layui.util;

        //欢迎信息
        layer.msg('Hello World');

        //输出版本号
        lay('#version').html(layui.v);

        //日期
        laydate.render({
            elem: '#test2'
            , value: new Date()
            , isInitValue: true
        });

        //触发事件
        util.event('test-active', {
            'test-form': function () {
                layer.open({
                    type: 1
                    , resize: false
                    , shadeClose: true
                    , area: '350px'
                    , title: 'layer + form'
                    , content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">'
                        , '<li class="layui-form-item">'
                        , '<label class="layui-form-label">输入框</label>'
                        , '<div class="layui-input-block">'
                        , '<input class="layui-input" lay-verify="required" name="field1">'
                        , '</div>'
                        , '</li>'
                        , '<li class="layui-form-item">'
                        , '<label class="layui-form-label">选择框</label>'
                        , '<div class="layui-input-block">'
                        , '<select name="field2">'
                        , '<option value="A">A</option>'
                        , '<option value="B">B</option>'
                        , '<select>'
                        , '</div>'
                        , '</li>'
                        , '<li class="layui-form-item" style="text-align:center;">'
                        , '<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
                        , '</li>'
                        , '</ul>'].join('')
                    , success: function (layero, index) {
                        layero.find('.layui-layer-content').css('overflow', 'visible');

                        form.render().on('submit(*)', function (data) {
                            layer.msg(JSON.stringify(data.field), {icon: 1});
                            //layer.close(index); //关闭层
                        });
                    }
                });
            }
        });
    });
    function submit(){
        $.ajax({
            url: "{:url('api/index/PlanData')}",
            method: "POST",
            dataType: "json",
            data: {name: "名称"},
            success: function (ret) {

            },
            error: function (ret) {
                //失败的回调
                return false;
            }
        });
    }
    function getList() {
        console.log($("#ProcessFCode").val());

        $(".Processlist").empty();
        $.ajax({
            url: "{:url('api/index/PlanData')}",
            method: "GET",
            dataType: "json",
            data: {name: "名称"},
            success: function (ret) {
                //成功的回调
                ProcesslistData = ret.data;

                for (x in ProcesslistData)  // x 为属性名
                {
                    console.log(ret.data[x]);

                    $(".Processlist").append('<div className="" style="" data-id="' + x + '" onclick="selectProcessFCode(' + x + ')" >' + ProcesslistData[x].F_ProcessFCode + '</div>');
                }

                return false;
            },
            error: function (ret) {
                //失败的回调

                return false;
            }
        });
    }

    function selectProcessFCode(index) {
        if (ProcesslistData.length > index) {
            $("#ProcessFCode").val(ProcesslistData[index]['F_ProcessFCode']);
            $("#BatchNumber").html(ProcesslistData[index]['F_BatchNumber']);
            $("#ProductId").html(ProcesslistData[index]['F_ProductId']);
            $("#ProductName").html(ProcesslistData[index]['F_ProductName']);
            $("#ProcessId").html(ProcesslistData[index]['F_ProcessId']);
            $("#EmId").html(ProcesslistData[index]['F_EmId']);
            $("#DispatchQuantity").html(ProcesslistData[index]['F_DispatchQuantity']);
        } else {

            layer.msg("未选择", {icon: 1});
            $("#BatchNumber").html("xxxx");
            $("#ProductId").html("xxxx");
            $("#ProductName").html("xxxx");
            $("#ProcessId").html("xxxx");
            $("#EmId").html("xxxx");
            $("#DispatchQuantity").html(SaveFileDialog);
        }
    }


    function changeStatus() {
        //存在close 为当前关闭，open当前为开启
        if ($("#operate").hasClass("close")) {
            $("#operate").removeClass("close");
            $("#operate").addClass("open");

            $("#operate").removeClass("layui-btn-normal");
            $("#operate").addClass("layui-btn-warm");

        } else {
            $("#operate").removeClass("open");
            $("#operate").addClass("close");

            $("#operate").removeClass("layui-btn-warm");
            $("#operate").addClass("layui-btn-normal");
        }
    }
</script>
</body>
</html>

{{end}}